<template>
	<view class="contain">
		<uni-header></uni-header>
		<tabs :tabs="tabs" :hasTop="true" @onChange="onChange"></tabs>
		
		<view class="padding-15">
			<view @click="go('/pages/index/orderDetail?id='+item.order_id)" v-for="(item,index) in list" class="bg-shadow-0 padding-lr10 margin-b12">
				<view class="flex f-a-c f-j-s h-50 b-bottom">
					<view class="flex f-a-c">
						<text class="margin-r4">Order Number:</text>
						<text>{{item.order_id}}</text>
					</view>
					<view>{{item.status}}</view>
				</view>
				
				<view class="flex padding-tb10 b-bottom">
					<view class="flex f-s-0 margin-r12 f-a-c">
						<view class="w-80 h-100 bg-img" :style="item.pic | bgimg()"></view>
					</view>
					<view class="flex flex-1 f-c">
						<view class="t-color-6">{{item.name}}</view>
						<!-- <view class="t-color-6 margin-t8">Title 1111111111sssssssss</view> -->
						<view class="t-color-9 margin-t8">x {{item.number}}</view>
					</view>
				</view>
				<view class="flex f-a-c f-j-s margin-t10">
					<text class="t-color-9">{{item.create_time}}</text>
					<view class="flex f-a-c">
						<text class="f-w-500 margin-r6">Total:</text>
						<text class="t-color-r text-price f-w-500">{{item.amount}}</text>
					</view>
				</view>
				
				<view class="flex f-a-c f-j-e padding-tb10">
					<view v-if="item.status == 'Unpaid'" @click.stop="go('/pages/index/orderPay?id='+item.order_id+'&amount='+item.amount)" class="flex f-a-c f-j-c padding-lr12 h-32 margin-l12 t-color-w bg-color-0">Pay</view>
					<view class="flex f-a-c f-j-c padding-lr12 h-32 margin-l12 t-color-3 b-color-3">Check</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>
<style scoped>
</style>
<script>
	const $ = require('@/utils/api.js');
	let self = this;
	export default {
		components: {},
		data() {
			return {
				tabs: [//空字符串全部, 0未支付，1已支付，2已发货，3已完成，4已取消',
					{name: 'All',value: ''},
					{name: 'Unpaid',value: '0'},
					{name: 'Unshipped',value: '1'},
					{name: 'Shipped',value: '2'},
					{name: 'Completed',value: '3'},
				],
				active: 0,
				page: 1,
				pageSize: 20,
				list: []
			};
		},
		onLoad: function(options) {
			self = this;
			this.init();
		},
		onShow() {
		},
		methods: {
			getList() {
				$.ajax({
					url: '/v1/tk_shop/user/order/list',
					data: {
						page: this.page,
						page_size: this.pageSize,
						type: this.tabs[this.active]['value'],
					},
					method: 'POST',
					success(res) {
						let list = [];
						if (self.page != 1) {
							list = self.list.concat(res.data.list);
						} else {
							list = res.data.list ? res.data.list : [];
						}
						self.totalPage = Math.floor(res.data.total/self.pageSize);
						self.list = list;
					}
				})
			},
			onChange(e) {
				this.active = e;
				this.init();
			},
			init() {
				this.page = 1;
				this.getList();
			},
		},
		computed: {},
		created() {
		},
		mounted() {},
		destroyed() {},
		onPullDownRefresh() {
		},
		onReachBottom() {
			
		}
	}
</script>